<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@page contentType="text/html; UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册</title>
    <link rel="stylesheet" href="./statics/css/bootstrap.min.css">
    <link rel="stylesheet" href="./statics/css/reg.css">
    <script src="./statics/js/jquery-1.8.3.min.js"></script>
</head>
<body >
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-6 offset-sm-3">
                <h1 class="text-center">用户注册</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6 offset-sm-3">
                <form id="reg">
                    <div class="form-group">
                        <label for="name">用户名:</label>
                        <input type="text" class="form-control" id="name" name="name" placeholder="用户名" >
                    </div>
                    <div class="form-group">
                        <label for="pwd">密码:</label>
                        <input type="password" class="form-control" id="pwd" name="password" placeholder="密码" >
                    </div>
                    <div class="form-group">
                        <label >角色选择:</label>
                            <select name="role" class="form-control">
                                <option value="admin">管理员</option>
                                <option value="student">学生</option>
                            </select>
                    </div>
                    <div class="form-group">
                        <label for="pwd">验证码:</label>
                        <div>
                            <input type="text" id="test" class="form-control" name="code"  placeholder="请输入验证码" style="width: 60%;float: left">
                            <img id="image" class="img-fluid" src="${pageContext.request.contextPath}/user/getImage" style="float: right;width: 30%;height: 38px;" alt="">
                        </div>
                        <div style="margin-top: 50px;clear: both">
                            <button type="button" id="register" class="btn btn-primary" style="float: left;width: 47%;">立即注册</button>
                            <a href="login.jsp" type="submit" id="login" class="btn btn btn-success" style="width: 47%;float: right;">返回登陆</a>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
</body>
</html>

<script>
    $(function (){
        $("#register").click(function (){
           $.post("${pageContext.request.contentType}/user/register",$("#reg").serialize(),function (res){
               if(res.status){
                   alert(res.msg+",点击跳转登录页面");
                   location.href="${pageContext.request.contextPath}/back/login.jsp"
               }else{
                   alert(res.msg);
               }

            });
        })

        $("#image").click(function (){
            $(this).attr("src","${pageContext.request.contextPath}/user/getImage?id="+Math.random());
        })
    })
</script>
